<template>
  <div style="margin: 20px">
    <div class="auditor_conter">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px" style="display: flex;justify-content: space-between">
      <div>
      <el-form-item label="方案名称" prop="type">
        <el-input type="text" v-model="queryParams.value" placeholder="请输入方案名称"
                  @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="用户类型" prop="type">
        <el-select v-model="queryParams.is_approve_user" placeholder="请选择" style="width: 200px">
          <el-option
              v-for="dict in ApproveUser"
              :key="dict.id"
              :value="dict.id"
              :label="dict.name"
          >{{ dict.name }}
          </el-option>

        </el-select>
      </el-form-item>
      </div>
      <div>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getList">搜索</el-button>
        <el-button type="info"  size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      </div>
    </el-form>
<!--    <el-row>-->
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--    </el-row>-->
<!--    <div style="margin: 20px auto ">人员清单审核</div>-->
    <el-table
        v-loading="loading"
        :data="UserList"
        :header-cell-style="tableHeaderColor"
        style="margin: 0 auto">
      <el-table-column
          prop="name"
          label="方案名称"
          align="center"
          fixed
          min-width="100px"
      >
      </el-table-column>
      <el-table-column
          prop="insure_no"
          label="保单号"
          align="center"
          min-width="180px"
      >
      </el-table-column>
      <el-table-column
          prop="account_use"
          label="账号使用单位"
          align="center"
          min-width="130px"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="warning"
              plain
              v-hasPermi="['Insurance:review_list:query']"
              @click="getAccountUser(scope.row)"
          >查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="actual_labor"
          align="center"
          label="实际用工单位" min-width="130px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="warning"
              plain
              v-hasPermi="['Insurance:review_list:query']"
              @click="getActuaEmployer(scope.row)"
          >查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="four_count"
          align="center"
          label="1-3类/人"  min-width="120px">
        <template slot-scope="scope">

          <span>{{ scope.row.four_down_count ? scope.row.four_down_count + '人' : scope.row.four_down_count }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="four_down_rate"
          align="center"
          label="1-3类占比/%"  min-width="120px">
      </el-table-column>
      <el-table-column
          prop="four_count"
          align="center"
          label="4类/人"  min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.four_count ? scope.row.four_count + '人' : scope.row.four_count }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="four_count_rate"
          align="center"
          label="4类占比/%"  min-width="120px">
      </el-table-column>
      <el-table-column
          prop="four_up_count"
          align="center"
          label="4类以上/人"  min-width="120px" >
        <template slot-scope="scope">
          <span>{{ scope.row.four_up_count ? scope.row.four_up_count + '人' : scope.row.four_up_count }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="four_up_count_rate"
          align="center"
          label="4类以上占比/%"  min-width="130px">
      </el-table-column>
      <el-table-column
          align="center"
          label="操作"
          min-width="230px"
          fixed="right"
      >
        <template slot-scope="scope">
          <el-button
              style="color:#0095FF "
              type="text"
              v-hasPermi="['Insurance:submit_user:Submit']"
              @click="getSubmitReview(scope.row)"
          >审核
          </el-button>
          <el-button
              style="color:#0095FF "
              type="text"
              v-hasPermi="['Insurance:review_member_list:details']"
              @click="getDetails(scope.row)"
          >查看详情
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    </div>
    <pagination
        style="background: transparent"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />
    <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.dialogVisible"
        width="30%"
    >
      <div style="height: 400px;overflow: auto">
        <div style="margin-bottom: 10px " v-for="(item,index) in employer" :key="index">
          {{ item.applicant }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialog.dialogVisible = false">关闭</el-button>
  </span>
    </el-dialog>
    <el-dialog
        :title="dialog1.title"
        :visible.sync="dialog1.dialogVisible"
        width="30%"
    >
      <div style="height: 400px;overflow: auto">
        <div style="margin-bottom: 10px " v-for="(item,index) in employer1" :key="index">
          {{ item.company }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialog1.dialogVisible = false">关闭</el-button>
  </span>
    </el-dialog>
    <el-dialog
        :title="dialog2.title"
        :visible.sync="dialog2.dialogVisible"
        width="80%"
    >
      <div style="height: 600px;overflow: auto">
        <el-table
            :data="UserListDetails"
            :header-cell-style="tableHeaderColor"
            style="width: 97%;margin: 0 auto">

          <el-table-column
              prop="company"
              align="center"
              width="250"
              label="实际用工单位" fixed min-width="180px">

          </el-table-column>
          <el-table-column
              prop="four_down"
              align="center"
              label="1-3类/人" min-width="120px">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="warning"
                  plain
                  v-hasPermi="['Insurance:review_member_list:details']"
                  @click="getType(scope.row)"
              >{{ scope.row.four_down ? scope.row.four_down + '人' : scope.row.four_down }}

              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="four_down_rate"
              align="center"
              label="1-3类占比/%" min-width="120px">
          </el-table-column>
          <el-table-column
              prop="four"
              align="center"
              label="4类/人" min-width="120px">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="warning"
                  plain
                  v-hasPermi="['Insurance:review_member_list:details']"
                  @click="getType1(scope.row)"
              >{{ scope.row.four ? scope.row.four + '人' : scope.row.four }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="four_rate"
              align="center"
              label="4类占比/%" min-width="120px">

          </el-table-column>
          <el-table-column
              prop="four_up"
              align="center"
              label="4类以上/人" min-width="120px">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="warning"
                  plain
                  v-hasPermi="['Insurance:review_member_list:details']"
                  @click="getType2(scope.row)"
              >
                {{ scope.row.four_up ? scope.row.four_up + '人' : scope.row.four_up }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="four_up_rate"
              align="center"
              label="4类以上占比/%" min-width="130px">
          </el-table-column>
          <!--        <el-table-column-->
          <!--            align="center"-->
          <!--            label="操作">-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-button-->
          <!--                size="mini"-->
          <!--                type="text"-->
          <!--                icon="el-icon-warning"-->
          <!--                v-hasPermi="['insurance:user:remove']"-->
          <!--                @click="getReject(scope.row)"-->
          <!--            >驳回-->
          <!--            </el-button>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
        </el-table>
        <pagination
            v-show="total1>0"
            :total="total1"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getQuer"
        />
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialog2.dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="dialog2.dialogVisible = false">确认</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import Template from "@/views/base/template";
import {review_list, plan_detail, submit_user} from "@/api/insurancemanagement/auditor"

export default {
  name: "index",
  components: {Template},
  data() {
    return {
      // 遮罩层
      loading: false,
      dialog: {
        title: '账号使用单位',
        dialogVisible: false,
      },
      dialog1: {
        title: '实际用工单位',
        dialogVisible: false,
      },
      dialog2: {
        title: '查看详情',
        dialogVisible: false,
      },
      // 对应工种字典
      typeOptions: [],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        // page:1,
        pageSize: 10,
        value: null,//方案名称
        is_approve_user:0,//用户类型
        user_id:null,
        role_id:null,
      },
      employer: [],//账号使用单位
      employer1: [],//账号使用单位
      UserList: [],
      total: 0,//总条数

      UserListDetails: [],//详情列表
      queryParams1: {//查看详情
        pageNum: 1,
        plan_id: '',//方案id
        pageSize: 10,
        value: null,//方案名称
        insure_id:'',

      },
      total1: 0,
      user_id: '',//操作人id
      ApproveUser:[
        {
          id:1,
          name:'批改'
        },
        {
          id:0,
          name:'投保'
        }
      ],
    }


  },
  created() {
    this.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.queryParams.user_id=JSON.parse(localStorage.getItem('userInfo')).userId;
    var info = JSON.parse(localStorage.getItem('userInfo'));
    if (info.roles.length != 0) {
      this.queryParams.role_id = info.roles[0].roleId
    }
    this.getList();
    // 对应工种字典翻译
    this.getDicts("industry_type").then(res => {
      this.typeOptions = res.data;
    })
  },
  methods: {
    /* 修改表头颜色 */
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #304156;color: #fff;font-weight: 400;font-family: Microsoft YaHei;'
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      review_list(this.queryParams).then(res => {
        this.UserList = res.data.data;
        this.total = res.data.count;
        // console.log('审核人员清单', res)
        this.loading = false;
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value = null
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //查看账号使用单位
    getAccountUser(item) {
      this.dialog.dialogVisible = true
      this.employer = item.account_use;
      // console.log('item12', item.account_use)
    },
    //点击1-3类跳转查看参考人员
    getType(item) {
      // console.log('item', item)
      var obj = {
        plan_id: this.queryParams1.plan_id,
        insure_id:this.queryParams1.insure_id,
        company: item.company,
        type: 1,//工种类型 1 1-3类  2 4类  3 4类以上
      }
      // console.log('obj', obj)
      this.$router.push({
        path: '/insurancemanagement/detailsPersons',
        query: {
          insureInfo: obj
        }
      })
    },
    //点击1-3类跳转查看参考人员
    getType1(item) {
      console.log('item', item)
      var obj = {
        plan_id: this.queryParams1.plan_id,
        insure_id:this.queryParams1.insure_id,
        company: item.company,
        type: 2,//工种类型 1 1-3类  2 4类  3 4类以上
      }
      // console.log('obj', obj)
      this.$router.push({
        path: '/insurancemanagement/detailsPersons',
        query: {
          insureInfo: obj
        }
      })
    },
    //点击1-3类跳转查看参考人员
    getType2(item) {
      // console.log('item', item)
      var obj = {
        plan_id: this.queryParams1.plan_id,
        insure_id:this.queryParams1.insure_id,
        company: item.company,
        type: 3,//工种类型 1 1-3类  2 4类  3 4类以上
      }
      // console.log('obj', obj)
      this.$router.push({
        path: '/insurancemanagement/detailsPersons',
        query: {
          insureInfo: obj
        }
      })
    },
    //查看实际用工单位
    getActuaEmployer(item) {
      this.dialog1.dialogVisible = true
      this.employer1 = item.actual_labor
    },
    //点击查看详情
    getDetails(item) {
      this.dialog2.dialogVisible = true;
      this.queryParams1.plan_id = item.plan_id;
      this.queryParams1.insure_id=item.insure_id;
      this.getQuer();
    },
    //查看详情
    getQuer() {
      plan_detail(this.queryParams1).then(res => {
        // this.UserList=res.data.data;
        // this.total=res.data.count;
        // res.data.forEach(v=>{
        //   // var
        // })
        this.UserListDetails = res.data.data;
        this.total1 = res.data.count
        // console.log('详情', res)
        // this.loading = false;
      })
    },
    //点击驳回按钮
    getReject(item) {
      this.dialog3.dialogVisible = true
    },
    //点击提交按钮审核成功
    getSubmitReview(item) {
      // console.log('item', item)
      var that = this;
      var obj = {
        plan_id: item.plan_id,
        user_id: this.user_id,
        insure_id:item.insure_id
      }
      this.$alert('您是否确认将这些人员审核通过？', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          if (action == 'confirm') {
            const loading = that.$loading({
              lock: true,
              text: '请耐心等待正在审核',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            submit_user(obj).then(res => {
              loading.close();
              if(res.code==1){

                that.$message({
                  message: res.msg,
                  type: 'success'
                });
                that.getList();
              }

            })

          }
        }
      });
    }

  },

}
</script>

<style >
.auditor_conter{
  background: #F8FBFF;
  padding:30px;
  border-radius: 10px;
  box-sizing: border-box;
}


/*.el-table--enable-row-hover .el-table__body tr:hover>td {*/
/*  background-color: red !important;*/
/*}*/
/*::v-deep .el-table tr:hover td{*/
/*  background: pink !important;*/
/*}*/
/*.el-table tbody tr:hover>td {*/
/*  background-color:red !important;*/
/*}*/


</style>
